<!-- 模板 -->
<template>
  <div class="root">
    <div class="header_bg"></div>
    <div class="card">
      <div class="card_txt">
        <div class="card_txt_left">
          <img src="http://42.192.80.102/Printing man-img/title.png" alt="" />
          <p>定制名片</p>
        </div>
        <div class="card_txt_right">
          <div class="card_txt_right_1">
            <img src="http://42.192.80.102/Printing man-img/list.png" alt="" />
            <p>资讯</p>
          </div>
          <div class="card_txt_right_1">
            <img
              src="http://42.192.80.102/Printing man-img/daipingjia.png"
              alt=""
            />
            <p>回答</p>
          </div>
        </div>
      </div>
      <div class="work">
        <div class="work_txt">
          <h3>桌面办公</h3>
          <span>/</span>
          <span>桌面定制 办公首选</span>
        </div>
        <div class="work_img">
          <ul>
            <li v-for="item in list" :key="item.id">
              <img :src="item.imgUrl" alt="" />
              <p>{{ item.name }}</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="work goods">
        <div class="work_txt">
          <h3>促销礼品</h3>
          <span>/</span>
          <span>品质潮货 低质3折</span>
        </div>
        <div class="work_img">
          <ul>
            <li v-for="item in goods" :key="item.id">
              <img :src="item.imgUrl" alt="" />
              <p>{{ item.name }}</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="btn-server">
      <div class="btn-server-header">
        <h3>定制服务开创者</h3>
        <span>/ 七大品类 专业定制 快速准确 </span>
      </div>
      <div class="btn">
        <div class="btn-left">
          <img src="http://42.192.80.102/Printing man-img/card1.png" alt="" />
          <div class="btn-txt">
            <h3>121,57</h3>
            <span>累计定制超过</span>
          </div>
        </div>
        <van-button
          class="yydz"
          type="primary"
          text="预约定制"
          @click="show = true"
        />
        <van-overlay :show="show" @click="(show = false), fss" />
        <van-overlay :show="show" @click="show = false">
          <div class="wrapper" @click="(show = true), fb()">
            <div class="block">预约成功</div>
          </div>
        </van-overlay>
      </div>
      <div class="btn-server-tall">
        <p>讨论区</p>
        <span>/ 数千位资深鉴别大神在这里交流分享</span>
      </div>
      <div class="comment">
        <div class="comment-hotdoor">热门</div>
        <div class="comment-txt">
          <p>
            我佛了呀 淘宝小鸿体育购入 识货上一次过 麻烦
            毒里的大神朋友们帮忙看看。。。
          </p>
          <span>48条回复 12条大神回复 </span>
        </div>
      </div>
      <div class="comment c2">
        <div class="comment-hotdoor rm">热门</div>
        <div class="comment-txt">
          <p>
            【扔一下就能判断鞋子的真假?】朋友买了一双vans
            之后，开始了疯狂的扔鞋挑战，他说：“不管用。。。
          </p>
          <span>46条回复 18条大神回复</span>
        </div>
      </div>
    </div>
    <MyFoots></MyFoots>
  </div>
</template>
<script>
import request from "../utils/request.js";
import MyFoots from "./MyFoots.vue";
export default {
  name: "",
  data() {
    return {
      list: [],
      goods: [],
      id: "",
      show: false,
    };
  },
  props: [],
  components: {
    MyFoots,
  },
  computed: {},
  filters: {},
  methods: {
    fb() {
      let yydz = document.querySelector(".yydz");
      console.log(yydz);
      // yydz.custom-style.text="预约成功"
      yydz.innerHTML = "预约成功";
      yydz.style.background = "red";
    },
    async getUserList() {
      let options = {
        url: "users/userList",
        type: "get",
        data: {
          id: 6,
        },
      };
      try {
        let { data: res } = await request(options);
        if (res.meta.status !== 200) {
          return;
        }
        console.log(res);
        this.list = res.data;
      } catch (error) {
        console.log(error);
      }
    },
    async getGoods() {
      let options = {
        url: "users/userList",
        type: "get",
        data: {
          id: 11,
        },
      };
      try {
        let { data: res } = await request(options);
        if (res.meta.status !== 200) {
          return;
        }
        console.log(res);
        this.goods = res.data;
        // this.goods = res.data.slice(0, 3);
      } catch (error) {
        console.log(error);
      }
    },
  },
  created() {},
  mounted() {
    this.getUserList();
    this.getGoods();
  },
};
</script>
<style lang="less" scoped>
// @import url(); 引入公共css类
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 2rem;
  height: 1rem;
  background-color: #fff;
  border-radius: 0.3rem;
  text-align: center;
  line-height: 1rem;
}
.yydz {
  background: #ffcf35;
  border: none;
  width: 2.1rem;
  height: 0.8rem;
  border-radius: 0.2rem;
}
.root {
  .header_bg {
    width: 100%;
    height: 2.3rem;
    background: #ffcf35;
  }
  .card {
    position: absolute;
    width: 7.1rem;
    height: 3.12rem;
    left: 0.2rem;
    top: 1.44rem;
    background: #f9f7f8;
    border-radius: 0.12rem;
    .card_txt {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .card_txt_left {
        display: flex;
        align-items: center;
        padding: 0.24rem;
        img {
          width: 0.72rem;
          margin-right: 0.1rem;
        }
        p {
          font-size: 0.22rem;
        }
      }
      .card_txt_right {
        display: flex;
        align-items: center;
        padding: 0.24rem;
        .card_txt_right_1 {
          display: flex;
          align-items: center;
          margin-right: 0.16rem;
          img {
            width: 0.4rem;
            margin-right: 0.08rem;
          }
          p {
            font-size: 0.2rem;
          }
        }
      }
    }
    .work {
      display: flex;
      flex-direction: column;
      padding: 0.24rem;
      background: #f9f7f8;
      margin-bottom: 0.24rem;
      border-radius: 0.12rem;
      .work_txt {
        display: flex;
        align-items: center;
        margin-bottom: 0.2rem;
        h3 {
          font-size: 0.28rem;
          margin-right: 0.08rem;
        }
        span {
          font-size: 0.18rem;
          margin-right: 0.08rem;
        }
      }
      .work_img {
        ::-webkit-scrollbar {
          display: none;
        }
        ul {
          display: flex;
          align-items: center;
          overflow: auto;
          li {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-right: 0.16rem;
            img {
              width: 1.2rem;
              margin-bottom: 0.04rem;
              height: 1rem;
            }
            p {
              font-size: 0.16rem;
            }
          }
        }
      }
    }
    .goods {
      // position: absolute;
      width: 7.1rem;
      height: 2.26rem;
      left: 0.2rem;
      top: 4.64rem;
      background: #f9f7f8;
      border-radius: 0.12rem;
    }
  }
  .btn-server {
    position: absolute;
    width: 7.1rem;
    left: 0.2rem;
    top: 7.42rem;
    background: #f9f7f8;
    border-radius: 0.12rem;
    padding: 0.2rem;
    margin-top: 0.24rem;
    padding-bottom: 2rem;
    .btn-server-header {
      display: flex;
      align-items: center;
      h3 {
        font-size: 0.28rem;
        margin-right: 0.05rem;
      }
      span {
        font-size: 0.18rem;
        color: #333;
      }
    }
    .btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #c2c1c1;
      padding-bottom: 0.2rem;
      margin-top: 0.24rem;
      .btn-left {
        display: flex;
        align-items: center;
        img {
          width: 1.1rem;
        }
        .btn-txt {
          display: flex;
          flex-direction: column;
          h3 {
            font-size: 0.28rem;
          }
          span {
            font-size: 0.2rem;
            color: #333;
          }
        }
      }
      .btnss {
        display: block;
        width: 3rem;
        height: 1rem;
      }
      .van-btn {
        width: 2.1rem;
        height: 0.8rem;
        border-radius: 0.2rem;
        color: #fff;
        background: #ffcf35;
        font-size: 0.28rem;
      }
    }
    .btn-server-tall {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #c2c1c1;
      padding: 0.2rem 0;
      p {
        font-size: 0.26rem;
        font-weight: 600;
      }
      span {
        font-size: 0.2rem;
        color: #333;
      }
    }
    .comment {
      display: flex;
      border-bottom: 1px solid #c2c1c1;
      padding: 0.2rem 0;
      .comment-hotdoor {
        font-size: 0.2rem;
        color: #fff;
        background: #333;
        width: 1.56rem;
        height: 0.3rem;
        line-height: 0.3rem;
        text-align: center;
        margin-right: 0.2rem;
        margin-top: 0.05rem;
      }
      .rm {
        width: 2.04rem;
      }

      .comment-txt {
        display: flex;
        flex-direction: column;
        p {
          font-size: 0.2rem;
          color: #333;
        }
        span {
          font-size: 0.2rem;
          color: #999;
        }
      }
    }
    .c2 {
      border: none;
    }
  }
}
</style>
